import styled from 'styled-components'

export const Container = styled.div`
    width: 730px;
    margin: 0 auto;
    .content{
        padding: 0 60px;
        padding-top: 40px;
        .ant-timeline-item-head{
            background-color: ${props=>props.theme.timeLineIconBgColor};
        }
        .year-count{
            font-size: 18px;
            margin: 0;
            line-height: 24px;
            font-weight: bold;
            color: ${props=>props.theme.timeLineYearColor};
        }
        .date{
            font-size: 15px;
            color: ${props=>props.theme.timeLineDateColor};
        }
        .title{
            overflow: hidden;
            position: relative;
            cursor: pointer;
            width: fit-content;
            transition: ease-in-out 0.3s;
            color: ${props=>props.theme.timeLineTitleColor};
            &::after{
                content: '';
                position: absolute;
                bottom: 0;
                left: -100%;
                width: 100%;
                height: 1px;
                background-color: #1890ff;
                transition: ease-in-out 0.3s;
            }
            &:hover{
                color: #1890ff;
                transition: ease-in-out 0.3s;
                &::after{
                    left: 0;
                    transition: ease-in-out 0.3s;
                }
            }
        }
    }
`